<template>
  <div >
    <div class="container" >

      <div class="tags-panel" >

        <ul class="">
          <li class="tags-line" >
            <div class="tags-title">品牌:</div>
            <ul class="tags">

              <li class="active">
                <a>全部</a>
              </li>
              <li class="" >
                <a  href="">万达影城</a>
              </li>
              <li class="">
                <a  href="">大地影院</a>
              </li>
              <li class="">
                <a href="">中影国际影城</a>
              </li>
              <li class="">
                <a href="">橙天嘉禾影城</a>
              </li>
              <li class="">
                <a href="">金逸影城</a>
              </li>
              <li class="">
                <a href="">星美国际影城</a>
              </li>
              <li class="">
                <a href="">幸福蓝海国际影城</a>
              </li>
              <li class="">
                <a href="">沃美影城</a>
              </li>
              <li class="">
                <a href="">保利国际影城</a>
              </li>
              <li class="">
                <a href="">CGV影城</a>
              </li>
              <li class="">
                <a href="">横店电影城</a>
              </li>
              <li class="">
                <a href="">其他</a>
              </li>
            </ul>
          </li>

          <li class="tags-line tags-line-border" >
            <div class="tags-title">行政区:</div>
            <ul class="tags">
              <li class="active">
                <a >全部</a>
              </li>
              <li class="">
                <a href="">地铁附近</a>
              </li>
              <li class="">
                <a href="">青秀区</a>
              </li>
              <li class="">
                <a href="">江南区</a>
              </li>
              <li class="">
                <a href="">西乡塘区</a>
              </li>
              <li class="">
                <a >兴宁区</a>
              </li>
              <li class="">
                <a>良庆区</a>
              </li>
              <li class="">
                <a >武鸣区</a>
              </li>
              <li class="">
                <a >横县</a>
              </li>
              <li class="">
                <a >宾阳县</a>
              </li>
              <li class="">
                <a >邕宁区</a>
              </li>
              <li class="">
                <a  >上林县</a>
              </li>
              <li class="">
                <a >马山县</a>
              </li>
            </ul>
          </li>
          <li class="tags-line tags-line-border" >

            <div class="tags-title">特殊厅:</div>
            <ul class="tags">
              <li class="active">
                <a >全部</a>
              </li>
              <li class="">
                <a href="">IMAX厅</a>
              </li>
              <li class="">
                <a href="">CGS中国巨幕厅</a>
              </li>
              <li class="">
                <a href="">杜比全景声厅</a>
              </li>
              <li class="">
                <a href="">Dolby Cinema厅</a>
              </li>
              <li class="">
                <a href="">RealD 6FL厅</a>
              </li>
              <li class="">
                <a href="">4DX厅</a>
              </li>
              <li class="">
                <a href="">儿童厅</a>
              </li>
              <li class="">
                <a href="">4K厅</a>
              </li>
              <li class="">
                <a href="">4D厅</a>
              </li>
              <li class="">
                <a href="">60帧厅</a>
              </li>
              <li class="">
                <a href="">巨幕厅</a>
              </li>
              <li class="">
                <a href="" >STARX厅</a>
              </li>
            </ul>
          </li>
          <li class="tags-line tags-line-border" >
            <div class="tags-title">服务:</div>
            <ul class="tags">
              <li class="active">
                <a >全部</a>
              </li>
              <li class="">
                <a href="">可改签</a>
              </li>
              <li class="">
                <a href="">可退票</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>






  export default {
        name: "",

    }
</script>

<style scoped>

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  div {
    display: block;
  }
  .tags-panel {
    border:1px solid #e5e5e5;
    padding: 0 20px;
    margin: 40px 0;
    position: relative;
  }

  .tags-panel li, .tags-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .tags-line {
    padding: 10px 0!important;

  }
  .tags-line-border {
    border-top: 1px dashed #e5e5e5;
  }


  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  .tags-title {
    height: 24px;
    line-height: 24px;
    float: left;
    color: #999;
    font-size: 14px;
  }
  .tags-panel ul.tags {
    margin-left: 40px;
  }

  .tags-panel li, .tags-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  ul ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .tags-panel li, .tags-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  ul ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  .tags li.active {
    background: #f34d41;
    color: #fff;
  }

  .tags li {
    border-radius: 14px;
    padding: 3px 9px;
    display: inline-block;
    margin-left: 12px;
  }


  .tags li.active a {
    color: #fff;
  }

  .tags li a {
    color: #333;
    font-size: 14px;
  }
  a {
    text-decoration: none;
  }

</style>
